import React from 'react';
import { Text, TextProps, StyleSheet } from 'react-native';
import { useResponsiveContext } from './ResponsiveProvider';

interface ResponsiveTextProps extends TextProps {
  size?: number;
  phoneSize?: number;
  tabletSize?: number;
  style?: any;
}

const ResponsiveText: React.FC<ResponsiveTextProps> = ({
  size = 14, 
  phoneSize,
  tabletSize,
  style,
  ...props
}) => {
  const { fs, isTablet } = useResponsiveContext();

  // 根据设备类型选择合适的字体大小
  const getFontSize = () => {
    if (isTablet && tabletSize) {
      return fs(tabletSize);
    }
    if (!isTablet && phoneSize) {
      return fs(phoneSize);
    }
    return fs(size);
  };

  const responsiveStyle = StyleSheet.compose(
    { fontSize: getFontSize() }, 
    style
  );

  return <Text style={responsiveStyle} {...props} />;
};

export default ResponsiveText; 